<template>
	<div class="mt15">
		<div class="flex col-center row-between plr30 pb10">
			<div>
				已选择<span class="main-color">0</span>个产品
			</div>
			<el-form class="flex col-top row-between" :model="queryParams" ref="queryRef" :inline="true">
				<el-form-item label="套餐名称/编号" prop="keyWords" style="margin-bottom: 0;">
					<el-input
					v-model="queryParams.node"
					placeholder="请输入"
					clearable
					class="resetInput"
					style="width: 200px"
					:suffix-icon="Search"
					@keyup.enter="handleQuery"
					/>
				</el-form-item>
				<el-button class="mt5" type="defaultBtn" @click="handleQuery">搜索</el-button>
				<el-button class="mt5" @click="resetQuery">重置</el-button>
			</el-form>		
		</div>
		<el-table
		   v-loading="loading"
		   :data="list"
		   style="width: 100%;"
			 :header-row-style="{background:'#FAFAFA',color:'#0C1019',height:'54px'}"
			 :cell-style="{height:'54px'}"
			 @selection-change="handleSelectionChange"
		>
		  <el-table-column type="selection" width="55" align="center" />
		   <el-table-column label="商品名称" align="center">
			  <template #default="scope">
				 <span class="main-color" >{{scope.row.customerName}}</span>
			  </template>
		   </el-table-column>
		   <el-table-column label="商品编号" align="center" prop="createByName" :show-overflow-tooltip="true" />
		   <el-table-column label="标准单价" align="center" prop="businessManagerName" :show-overflow-tooltip="true" />
		   <el-table-column label="标准单价" align="center" prop="phoneNumber" :show-overflow-tooltip="true" />
		   <el-table-column label="备注信息" align="center" prop="latestFollowupTime" :show-overflow-tooltip="true" />
		</el-table>
		<pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize" />
	</div>
</template>

<script>
	import {resetForm,getUserInfo} from '@/utils/ruoyi'
	import { customerList } from "@/api/business/customer";
	export default{
		data(){
			return{
				pageNum:'',
				pageSize:'',
				total:'',
				queryParams:{
					node:''
				},
				list:[],
				loading:true
			}
		},
		mounted() {
		  this.getList();
		},
		methods:{
			// 重置按钮操作
			resetQuery() {
			  this.resetForm("queryRef");
			  // this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
			  // ids.value = selection.map(item => item.jobId);
			  // single.value = selection.length != 1;
			  // multiple.value = !selection.length;
			},
			// 请求列表数据
			getList(){
				this.loading = true;
				customerList(this.queryParams).then(response => {
				  this.list = response.rows;
				  this.total = response.total;
				  this.loading = false;
				});
			},
			
		}
	}
</script>

<style>
</style>